simple wysiwyg editor [ source code ]

This is a WYSIWYG text editor based HTML and JavaScript , we need to create them to execCommand () and div tag with content editable content attribute.
<button onclick="document.execCommand('bold',false,null);">Bold</button> <button onclick="document.execCommand('createLink',false,null);">createLink</button> <button onclick="document.execCommand('undo',false,null);">undo</button> <button onclick="document.execCommand('redo',false,null);">redo</button> <button onclick="document.execCommand('insertOrderedList',false,null);">insertOrderedList</button> <button onclick="document.execCommand('copy',false,null);">copy</button> <button onclick="document.execCommand('cut',false,null);">cut</button> <button id="paste">Paste</button> <div style="border:1px solid; padding: 3px; width:100%; height:400px; background:white" id='input' contenteditable='true'> select some of this text and then hit one of the buttons above </div> <script> document.getElementById('paste').addEventListener('click', ()=>{ let pasteArea = document.getElementById('input'); navigator.clipboard.readText() .then((text)=>{ document.execCommand('insertText', false, text) }); }); </script>

© 2025 Manajmnt code

Share to :

☷✎

Related

• Open text (.txt) from local file and show content in textarea [ source code & demo ]In this example we are using file system API to open a text file from local files and show content i… Read More
• building text editor template using html css jsTo build a text editor we need firstly an HTML template like this one <style .buttons { width: 10… Read More
• How to add music background to blogger [ autoplay, no stop music]In this example i will be share with you how to create audio tag with javascript and how it's make t… Read More